import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { css, cx } from '@emotion/css';
import styled from '@emotion/styled';

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: ${() => 'green'};
  }
`;

export default class extends React.Component {
  state = {
    color: 'red',
  };
  componentDidMount = () => {
    setTimeout(() => {
      this.setState({ color: 'green' });
    }, 3000);
  };
  render() {
    const { color } = this.state;
    return (
      <div>
        <div
          className={css`
            padding: 32px;
            background-color: hotpink;
            font-size: 24px;
            border-radius: 4px;
            &:hover {
              color: ${color};
            }
          `}
        >
          Hover to change color.
        </div>

        <Button>This my button component.</Button>
      </div>
    );
  }
}
